<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - light cube</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test cube
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="lightPosX"></div>
      <div id="lightPosY"></div>
      <div id="lightPosZ"></div>
      <div id="lightDirectZ"></div>
      <div id="lightDirectX"></div>
      <div id="cameraX"></div>
      <div id="cameraY"></div>
      <div id="cameraZ"></div>
      <div id="limitIn"></div>
      <div id="limitOut"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec3 a_color;
attribute vec3 a_norm;
attribute vec2 a_texCoor;

uniform vec3 u_cameraPos;
uniform vec3 u_lightPos;
uniform vec4 u_amibLigh;
uniform mat4 u_normMat;
uniform mat4 u_modelMat;

uniform mat4 u_mvpmat;
varying vec4 v_color;
varying vec3 v_lighPos;
varying vec3 v_norm;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
varying vec4 v_amib;

varying vec2 v_texCoor;

void main() {
  gl_Position = u_mvpmat * a_position;
  v_norm = normalize(vec3(a_norm));
  v_surfaceToLight = u_lightPos - vec3(a_position);
  v_surfaceToView = u_cameraPos - vec3(a_position);
  v_color = vec4(a_color,1.0);
  v_amib = u_amibLigh;
  
  v_texCoor = a_texCoor;
}
</script>
<!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
uniform float u_shine;
uniform sampler2D u_sampler;

uniform vec3 u_lightDirection;
uniform float u_limitIn;
uniform float u_limitOut;


varying vec3 v_lighPos;
varying vec3 v_norm;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
varying vec4 v_amib;

varying vec2 v_texCoor;
void main() {
  vec3 normal = normalize(v_norm);
  vec3 surfaceLightDirection = normalize(v_surfaceToLight);
  vec3 cameraDirection = normalize(v_surfaceToView);
  vec3 halfVec = normalize(surfaceLightDirection + cameraDirection);
  
  vec3 lightDirection = normalize(u_lightDirection);

  float dotFromDirect = dot(surfaceLightDirection, -lightDirection);
  float lmtRange = u_limitIn - u_limitOut;
  float inlight = clamp((dotFromDirect - u_limitOut)/lmtRange, 0.0, 1.0);
  float light = inlight * dot(normal, surfaceLightDirection);
  float specular = inlight * pow(dot(normal, halfVec), u_shine);

  
  vec4 tmp = texture2D(u_sampler, v_texCoor);
  gl_FragColor = tmp;
  gl_FragColor.rgb *= light;
  gl_FragColor.rgb += v_amib.rgb*tmp.rgb;
  gl_FragColor.rgb += specular;
}
</script>


<script id="vertex-shader-2d_new" type="x-shader/x-vertex">
  attribute vec4 a_position2;
  attribute vec4 a_color2;
  uniform mat4 u_mvpmat2;
  varying vec4 v_color2;
  void main() {
    gl_Position = u_mvpmat2 * normalize(a_position2);
    v_color2 = a_color2;
  }
</script>

<script id="fragment-shader-2d_new" type="x-shader/x-fragment">
  precision mediump float;

  varying vec4 v_color2;
  void main() {
    gl_FragColor = v_color2;
  }
</script>

<script id="vertex-shader-2d_3" type="x-shader/x-vertex">
  attribute vec4 a_position;
  uniform mat4 u_mat3;
  void main() {
    gl_Position = u_mat3 * normalize(a_position);
  }
  </script>
  <!-- fragment shader -->
  <script id="fragment-shader-2d_3" type="x-shader/x-fragment">
  precision mediump float;
  
  void main() {
    gl_FragColor = vec4(0.0,1.0,0.0,1.0);
  }
  </script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script src="homework10/script.js"></script>


</html>